<template>
  <div>
    <BasicTable @register="registerTable">
      <template #headerCell="{ column }">
        <span>{{ column.customTitle }}</span>
      </template>

      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction :actions="getActions(record)" />
        </template>
      </template>

      <template #toolbar>
        <div class="flex-warp">
          <a-button type="primary" @click="handleCreate">新增移动卡申请</a-button>
        </div>
      </template>
    </BasicTable>

    <!-- 移动卡详情模态框 -->
    <CardModal @register="registerModal" @reload="refresh" />
  </div>
</template>

<script lang="ts" setup>
  import { BasicTable, useTable, TableAction, ActionItem } from '@/components/Table';
  import { getBasicColumns } from './tableData';
  import { useModal } from '@/components/Modal';
  import { ref, reactive } from 'vue';
  import CardModal from './modal/index.vue';
  import { MobileCardPageList } from '@/api/phoneAuth/phoneAuthList';
  import { useMessage } from '@/hooks/web/useMessage';

  const { createMessage, createConfirm } = useMessage();

  // 定义套餐选项
  const packageOptions = [
    { 
      label: '深圳39元行业卡-社工（39元折29元）',
      value: '1343646459204800512',
      price: '29',
      desc: '通话600分钟，流量50G'
    },
    { 
      label: '深圳99元行业卡-社工（99元折49元）',
      value: '1343646675087208448',
      price: '49',
      desc: '通话1200分钟，流量70G'
    }
  ];

  // 处理套餐价格和描述的显示
  const getPackagePrice = (mainprodid) => {
    const packageItem = packageOptions.find(item => item.value === mainprodid);
    return packageItem ? `${packageItem.price}元` : '';
  };

  const getPackageDesc = (mainprodid) => {
    const packageItem = packageOptions.find(item => item.value === mainprodid);
    return packageItem ? packageItem.desc : '';
  };

  // 自定义表格列
  const columns = getBasicColumns();
  // 修改price列配置
  const priceIndex = columns.findIndex(col => col.dataIndex === 'price');
  if (priceIndex > -1) {
    columns[priceIndex].customRender = ({ record }) => getPackagePrice(record.mainprodid);
  }
  // 修改desc列配置
  const descIndex = columns.findIndex(col => col.dataIndex === 'desc');
  if (descIndex > -1) {
    columns[descIndex].customRender = ({ record }) => getPackageDesc(record.mainprodid);
  }

  const [registerTable, { reload }] = useTable({
    title: '',
    api: MobileCardPageList,
    columns: columns,
    rowKey: 'id',
    useSearchForm: true,
    formConfig: {
      labelWidth: 100,
      schemas: [
        {
          field: `keyWord`,
          label: `关键词`,
          component: 'Input',
          colProps: {
            span: 8,
          },
          componentProps: {
            placeholder: '请输入姓名/联系电话',
          },
        },
      ],
    },
    showTableSetting: true,
    tableSetting: { fullScreen: true },
    showIndexColumn: true,
    clickToRowSelect: false,
    actionColumn: {
      width: 150,
      title: '操作',
      dataIndex: 'action',
    },
  });

  const getActions = (record: any) => {
    let actions: ActionItem[] = [
      {
        label: '查看',
        tooltip: '查看详情',
        onClick: handleView.bind(null, record),
      },
    ];

    return actions;
  };

  const [registerModal, { openModal }] = useModal();

  function handleCreate() {
    openModal(true, {
      isUpdate: false,
      packageOptions,
    });
  }

  function handleView(record: any) {
    openModal(true, {
      record,
      isUpdate: false,
      isView: true,
      packageOptions,
    });
  }

  /** 刷新数据 */
  function refresh() {
    reload();
  }
</script>

<style lang="less" scoped>
  .flex-warp {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
</style>
